<template>

	<keyboard open v-model:value="value" type="digit" @confirm="submit" focus></keyboard>
	<pwdModal ref="tixian" @success="passSubmit" @forgetpassword="forgetpassword"> </pwdModal>
</template>

<script setup>
	import keyboard from "../../components/custom_keyboard/custom_keyboard.vue"
	import pwdModal from "@/uni_modules/uu-pwdModal/components/uu-pwdModal/uu-pwdModal.vue"
	import { userInfo } from "../../stores/userInfo" 
	import {
		ref
	} from "vue"
	
	let UserInfo = userInfo()
	
	let moneyList = ref([{
		'id': 0,
		'money': 100
	}, {
		'id': 1,
		'money': 200
	}, {
		'id': 2,
		'money': 300
	}, {
		'id': 3,
		'money': 400
	}])
	let activeIndex = ref(0)
	let value = ref("")

	// let 支付密码
	let paypassworData = ref("123123")

	let tixian = ref()


	let selectMoney = (index) => {
		this.activeIndex = index
	}
	let okEvent = () => {
		console.log("充值")
	}

	let submit = () => {
		// console.log(value.value, "提交了")
		tixian.value.open()

	}

	let pwd_evend = (e) => {
		console.log("确认密码")
	}

	//提交密码
	let passSubmit = async (e) => {
		// console.log(e, "提交密码")
		let res = validatePassword(paypassworData.value, e)
		// console.log(res, "res支付")
		if (res) {
			console.log("支付成功")
			let result = await UserInfo.userRecharge({
				userId:UserInfo.userinfoData.wxLoginCode,
				operationType:1,
				amount:value.value
			})
			if(result){
				uni.showToast({
					title: '支付成功', // 提示内容
					icon: 'success', // 图标类型：success、loading、none
					duration: 2000 // 显示时长（毫秒）
				});
				// 在C页面内 navigateBack，将返回A页面
				uni.navigateBack({
					delta: 1
				});
				
			}else{
				uni.showToast({
					title: '支付失败', // 提示内容
					icon: 'error', // 图标类型：success、loading、none
					duration: 2000 // 显示时长（毫秒）
				});
			}
			// console.log(result,"result")
		
		} else {
			uni.showToast({
				title: '支付失败', // 提示内容
				icon: 'error', // 图标类型：success、loading、none
				duration: 2000 // 显示时长（毫秒）
			});
		}
	}

	//忘记密码
	let forgetpassword = () => {
		console.log("忘记密码")
	}

	let validatePassword = (targetPassword, inputArray) => {
		// 基本匹配检查
		if (!isPasswordMatch(targetPassword, inputArray)) {
			return false;
		} else {
			return true;
		}


	}


	let isPasswordMatch = (targetPassword, inputArray) => {
		// 将目标密码转换为字符串形式
		const targetString = String(targetPassword);

		// 将输入的密码数组转换为字符串形式
		const inputString = inputArray.join("");
		console.log(targetString, inputString, "inputString")
		// 比较两者是否相等
		return targetString == inputString;
	}
</script>

<style lang="scss">
	.recharge {
		margin: 30rpx;

		.recharge-title {
			color: #333333;
			font-weight: bold;
		}

		.recharge-tip {
			margin-top: 20rpx;

			view {
				font-size: 28rpx;
				color: #666666;
				margin-top: 10rpx;
			}
		}

		.recharge-money {
			display: flex;
			align-items: center;
			overflow: hidden;
			overflow-x: scroll;
			margin-top: 10rpx;

			.recharge-money-item:first-child {
				margin-left: 0;
			}

			.recharge-money-item {
				margin: 20rpx 10rpx;
				width: 280rpx;
				height: 360rpx;
				border: 2rpx solid #efefef;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				box-shadow: #f0f0f0 0px 1px 8px 0;
				flex-shrink: 0;

				.recharge-item-money {
					font-size: 60rpx;
					color: #333;

					span {
						font-size: 28rpx;
					}
				}

				.recharge-item-tip {
					padding: 6rpx 20rpx;
					font-size: 24rpx;
					background: #efefef50;
					border-radius: 40rpx;
					margin-top: 20rpx;
					color: #666666;
				}
			}

			.active {
				background-image: url("");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				border: none;
			}
		}

		.recharge-buttom-box {
			position: fixed;
			bottom: 0;
			width: calc(100vw - 60rpx);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 80rpx;
			padding-top: 20rpx;
			border-top: 2rpx dashed #efefef;
			box-sizing: border-box;

			.buttom-left {
				font-size: 28rpx;
				display: flex;
				align-items: flex-end;

				.buttom-left-money {
					font-weight: bold;
					font-size: 40rpx;
					margin-left: 20rpx;
					line-height: 38rpx;
				}

				.buttom-left-money::first-letter {
					font-weight: normal;
					font-size: 28rpx;
				}
			}

			.buttom-right {
				padding: 16rpx 58rpx;
				background: #333;
				color: #fff;
				border-radius: 50rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
</style>